<template>
  <h2> 管理员理财列表</h2>
  理财编号
  <input type="text" v-model="state.fid" />
  理财名称
  <input type="text" v-model="state.fname" />
  理财收益
  <input type="text" v-model="state.minfyear" /> -
  <input type="text" v-model="state.maxfyear" />
  <input type="button" value="查询" @click="show" class="btn btn-primary" />
  <input type="button" value="批量删除" class="btn btn-danger" @click="pishan" />
  <table class="table table-bordered">
    <tr>
      <td><input type="checkbox" v-model="all" @click="checkall"></td>
      <td>理财编号</td>
      <td>理财名称</td>
      <td>年收益</td>
      <td>月收益</td>
      <td>最低金额</td>
      <td>理财人数</td>
      <td>风险等级</td>
      <td>操作</td>
    </tr>
    <tr v-for="item in list">
      <td><input type="checkbox" v-model="item.checked" @click="checked(item)" ></td>
      <td>{{item.F_Id}}</td>
      <td>{{item.F_Name}}</td>
      <td>{{item.F_Year}}</td>
      <td>{{(item.F_Year/12*100).toFixed(2)}}%</td>
      <td>{{item.F_Money}}</td>
      <td>{{item.F_Num}}</td>
      <td>{{item.F_level==0?'低风险':item.F_Level==1?'中风险':'高风险'}}</td>
      <td><input type="button" value="删除" class="btn btn-danger" />
        <input type="button" value="修改" class="btn btn-primary" @click="upd(item.F_Id)" /></td>
    </tr>
  </table>
  <input type="button" value="首页" @click="page('a')" />
  <input type="button" value="上一页" @click="page('c')" />
  <input type="button" value="下一页" @click="page('d')" />
  <input type="button" value="尾页" @click="page('b')" />

  <select v-model="state.pageSize" @change="setpage" >
    <option :value="item" v-for="item in arr" >每页{{ item }}条</option>
  </select>

  <input type="text" size="2" v-model="tiao" />
  <input type="button" value="跳转"  @click="page('e')" />
  </template>
  
  <script setup lang="ts">
import {reactive,ref,toRefs,onMounted} from 'vue'
import { useRouter,useRoute } from 'vue-router';
import axios from 'axios';
const router=useRouter();
const route=useRoute();
let data:any=reactive({
    state:{
      fid:'',
      fname:'',
      pageIndex:1,
      pageSize:2,
      minfyear:'',
      maxfyear:'',
    },
    arr:[2,3,4,5],
    tiao:'',
    list:[],
    ListCount:'',
    PageCount:'',
    all:'',//控制全选按钮选中与不选中的
    ids:[],//用来存储所有的id
})
let{state,list,ListCount,PageCount,arr,tiao,all,ids} =toRefs(data);
//全选
const checkall=()=>{
    //all的值为true 那下面的每一个复选框都为true
    all.value=!all.value;
    list.value.forEach((item:any)=>{
      item.checked=all.value;
    })
    if(all.value==true)
    {
      list.value.forEach((item:any)=>{
      ids.value.push(item.F_Id);
    })
    }
    else{
      ids.value=[];
    }
}
//反选
const checked=(obj:any)=>{
  obj.checked=!obj.checked;//取反
  //every 返回值为布尔类型 如果有一件不满足就是false 都满足才是true
  let bool=list.value.every((item:any)=>{
    return item.checked==true    
    })
    all.value=bool;
    //如果选中push
    if(obj.checked==true)
    {
      ids.value.push(obj.F_Id);
      console.log(ids.value);
    }
    //如果没有被选中移除id
    else{
   let i= ids.value.find((item:any)=>{
        return item==obj.F_Id
      })
      ids.value.splice(i,1);
    }
}
//批量删除
const pishan=()=>{
  //1 判断数组中是否有值
  if(ids.value.length==0)
  {
    alert('至少选择一项');
    return;
  }
  //2 发送请求
  let idstr=ids.value.toString();
  console.log(idstr);
  axios({
    url:"/api/Finance/GetFinanceDel",
    method:'get',
    params:{
      id:idstr
    }
  })
  .then(res=>{
    console.log(res);
    if(res.data.data>0)
    {
      alert('删除成功');
      show();
    }
    else{
      alert('删除失败');
    }
  })
  .catch(err=>{
    console.log(err);
  })
}
onMounted(()=>{
  show();
})
const setpage=()=>{
  state.value.pageIndex=1;
  state.value.pageSize=state.value.pageSize;
  ;
  show();
}
const show=()=>{
  axios({
    url:"/api/Finance/GetFinanceList",
    method:"get",
    params:state.value
  })
  .then(res=>{
    console.log(res);
  
      res.data.list.forEach((item:any)=>{
      item.checked=true;
    })

    list.value=res.data.list;
    ListCount.value=res.data.ListCount;
    PageCount.value=res.data.PageCount;
    
  })
  .catch(err=>{
    console.log(err); 
  })
}
const page=(val:any)=>{
    if(val=="a")
    {     
      state.value.pageIndex=1;
    }
   else if(val=="b")
    {
      state.value.pageIndex=PageCount.value;
    }
   else if(val=="c")
    {
      
      state.value.pageIndex--;
    }
   else if(val=="d")
    {
      if(state.value.pageIndex==PageCount.value)
      {
        alert('已经是最后一页了');
        return;
      }
      state.value.pageIndex++;
    }
    else if(val=="e")
    {
      if(tiao.value<1||tiao.value>PageCount.value)
      {
        alert('页码只能在1和'+PageCount.value+'之间');
        return;
      }
      state.value.pageIndex=tiao.value;
    }
    show();
}
const upd=(id:any)=>{
  router.push({

  })
}
  </script>
  
  
  
  <style scoped>
  
  </style>
  